<template>
  <div class="containerAuthMenu">
    <div class="menuAuthForm">
      <div class="menuAuthFormRound">
        <svg-icon icon-class="true-svg" style="color:#fff;font-size: 72px;" />
      </div>
      <div class="menuAuthFormItem">
        {{$t('认证成功')}}
      </div>
      <el-button type="danger" class="menuAuthButton" size="small" @click="logout">{{$t('注销')}}</el-button>
    </div>
  </div>
</template>

<script>
import { getAuthUserInfo } from '@/utils/auth'
import { authLogout, checkAuthAlive, keepAlive } from '@/api/authLogin'
export default {
  name: 'authMenu',
  data () {
    return {
      userInfo: getAuthUserInfo(),
      timerKeep: null,
      timerCheck: null
    }
  },
  created () {
    window.addEventListener('unload', e => this.unloadFn())
    window.addEventListener('beforeunload', e => this.beforeunloadFn(e))
  },
  mounted () {
    // 保活
    keepAlive({ name: this.userInfo.name }).then(res => {
    }).catch(e => {
      this.$store.dispatch('user/logoutAuth').then(res => {
        this.$router.push(`/authLogin`)
      })
      clearInterval(this.timerKeep)
    })
    this.timerKeep = setInterval(() => {
      keepAlive({ name: this.userInfo.name }).then(res => {
      }).catch(e => {
        this.$store.dispatch('user/logoutAuth').then(res => {
          this.$router.push(`/authLogin`)
        })
        clearInterval(this.timerKeep)
      })
    }, 120000)
    // 检查存活
    checkAuthAlive({ name: this.userInfo.name }).catch(e => {
      this.$store.dispatch('user/logoutAuth').then(res => {
        this.$router.push(`/authLogin`)
      })
      clearInterval(this.timerCheck)
    })
    this.timerCheck = setInterval(() => {
      checkAuthAlive({ name: this.userInfo.name }).catch(e => {
        this.$store.dispatch('user/logoutAuth').then(res => {
          this.$router.push(`/authLogin`)
        })
        clearInterval(this.timerCheck)
      })
    }, 5000)
  },
  destroyed () {
    window.removeEventListener('unload', e => this.unloadFn())
    window.removeEventListener('beforeunload', e => this.beforeunloadFn())
  },
  beforeDestroy () {
    if (this.timerKeep) {
      clearInterval(this.timerKeep) // 在Vue实例销毁前，清除我们的定时器
    }
    if (this.timerCheck) {
      clearInterval(this.timerCheck) // 在Vue实例销毁前，清除我们的定时器
    }
  },
  methods: {
    logout () {
      authLogout({ name: this.userInfo.name }).then(res => {
        this.$store.dispatch('user/logoutAuth').then(res => {
          this.$router.push(`/authLogin`)
        })
      }).catch(e => {
        this.$store.dispatch('user/logoutAuth').then(res => {
          this.$router.push(`/authLogin`)
        })
      })
    },
    unloadFn () {
      this._gap_time = new Date().getTime() - this._beforeUnload_time
      // this.logout()
      if (this._gap_time <= 5) {
        authLogout({ name: this.userInfo.name })
        this.$store.dispatch('user/logoutAuth').then(res => {
          this.$router.push(`/authLogin`)
        })
      }
    },
    beforeunloadFn (e) {
      this._beforeUnload_time = new Date().getTime()
    }
  }
}
</script>

<style scoped>
.containerAuthMenu {
  position: relative;
  width: 100%;
  height: 100vh;
  background: url("../../assets/img/loginMenu.jpg") no-repeat fixed;
  background-size: cover;
  z-index: 1;
}
.menuAuthForm {
  position: absolute;
  width: 550px;
  height: 350px;
  left: 50%;
  top: 45%;
  z-index: 1001;
  border-radius: 10px;
  transform: translate(-50%, -50%);
  text-align: center;
  /* box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3), 0 0 10px rgba(0, 0, 0, 0.1);
  background-color: rgba(255, 255, 255);
}
.menuAuthFormItem {
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  letter-spacing: 10px;
  font-size: 48px;
  font-weight: 600;
  z-index: 1008;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.menuAuthFormRound {
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  z-index: 1003;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  /* box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3), 0 0 10px rgba(0, 0, 0, 0.1);
  /* background-color: rgba(255, 255, 255); */
  background-color: #67c23a;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.menuAuthFormImage {
  position: absolute;
  z-index: 1002;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
}
.menuAuthLogo {
  position: absolute;
  width: 200px;
  z-index: 1001;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3), 0 0 10px rgba(0, 0, 0, 0.1);
  /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 6px rgba(0, 0, 0, 0.1); */
  left: 15%;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  /* background-color: rgba(255, 255, 255, 1); */
  background-image: linear-gradient(145deg, #ccccff, #99ccff);
}
.textLogin {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 20%;
  width: 300px;
  z-index: 1001;
}
.menuAuthButton {
  position: absolute;
  right: 0%;
  bottom: 0%;
  transform: translate(-50%, -50%);
  z-index: 1003;
}
</style>
<style lang='scss'>
.containerAuthMenu::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1000;
}
</style>
